<template>
  <el-drawer 
    v-model="drawer2" 
    :direction="direction" 
    :width="800"
    :before-close="handleClose"
  >
    <template #header>
      <h4 style="font-size: 16px; font-weight: 600;">详情</h4>
    </template>
    <template #default>
      <div class="detail-container">
        <!-- 标题区域 -->
        <div class="detail-title">
          {{ newsForm.title }}
        </div>

        <!-- 来源和时间区域 -->
        <div class="detail-meta">
          <span class="source">{{ newsForm.source }}</span>
          <span class="time">{{ newsTime }}</span>
          <a :href="newsForm.url" target="_blank" class="original-link">原文链接</a>
        </div>

        <!-- 摘要区域 -->
        <div class="detail-summary">
          <p>{{ newsForm.summary }}</p>
          <span class="expand-btn">展开</span>
        </div>

        <!-- 正文内容区域 -->
        <div class="detail-content" v-html="newsForm.markContent"></div>
      </div>
    </template>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 10px;">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { ElMessageBox } from 'element-plus'
import type { DrawerProps } from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  newsData: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update:modelValue'])

const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('rtl')

// 新闻数据
const newsForm = ref({
  title: '',
  source: '',
  url: '',
  summary: '',
  markContent: ''
})

// 新闻时间
const newsTime = ref('')

// 监听modelValue变化，控制抽屉显示
watch(
  () => props.modelValue,
  (newVal) => {
    drawer2.value = newVal
  },
  { immediate: true }
)

// 监听内部变量变化，通知父组件
watch(
  () => drawer2.value,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

// 监听newsData变化，更新表单
watch(
  () => props.newsData,
  (newData) => {
    if (newData) {
      newsForm.value = {
        title: newData.newsTitle || '',
        source: newData.newsSource || newData.siteName || '',
        url: newData.newsUrl || '',
        summary: newData.abstractReal || '',
        markContent: newData.markContent || ''
      }
      newsTime.value = newData.createTime || ''
    }
  },
  { immediate: true, deep: true }
)

// 关闭前回调
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定要取消编辑吗？未保存的内容将丢失')
    .then(() => done())
    .catch(() => {})
}

// 取消按钮
const cancelClick = () => {
  ElMessageBox.confirm('确定要取消编辑吗？未保存的内容将丢失')
    .then(() => {
      drawer2.value = false
    })
    .catch(() => {})
}

// 确定按钮
const confirmClick = () => {
  ElMessageBox.confirm('确定要保存修改吗？')
    .then(() => {
      console.log('保存成功', newsForm.value)
      drawer2.value = false
    })
    .catch(() => {})
}
</script>

<style scoped>
/* 详情容器样式 */
.detail-container {
  padding: 0 20px;
  height: calc(100% - 40px);
  overflow-y: auto;
}

/* 标题样式 */
.detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  line-height: 1.5;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* 来源和时间样式 */
.detail-meta {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 14px;
  margin-bottom: 20px;
}

.source {
  margin-right: 15px;
}

.time {
  margin-right: 15px;
}

.original-link {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

/* 摘要区域样式 */
.detail-summary {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-summary p {
  margin: 0;
  font-size: 14px;
  color: #666;
  flex: 1;
}

.expand-btn {
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  margin-left: 10px;
  white-space: nowrap;
}

/* 正文内容样式 */
.detail-content {
  font-size: 14px;
  color: #333;
  line-height: 1.8;
}

.detail-content p {
  margin: 0 0 20px 0;
}

.detail-content p:before {
  content: '';
  display: block;
  margin-bottom: 8px;
}

/* 标题行样式（### 开头的文本） */
.detail-content p:contains('###') {
  font-weight: 600;
  color: #333;
  margin-top: 25px;
}

/* 适配含有短横线的列表项 */
.detail-content p:contains('-') {
  padding-left: 10px;
}
</style>